import React from "react";
import { ProTable } from "@ant-design/pro-components";
import { Button, Form, Input, Tree, TreeDataNode } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useNavigate, useParams } from "react-router-dom";
import { queryDynamicApi } from "../../../../api";

const App = () => {
  let [form] = Form.useForm()
  const {projectId} = useParams()

 const nav =  useNavigate()
  return (
    <div>
      {/* <Button onClick={()=>{
       const schema =  JsonEditor.toSchema({
        name:"ssss",
        num:1,
        isSuccess:true,
        array:[
          "sss",
          111,
          {
            sss:"sss"
          },
          [
            "222222",
            {}
          ]
        ]
       })
       console.log('schemaschema',schema)
      }}>
        toSchema
      </Button> */}
      {/* <JsonEditor onChange={schema=>{
             console.log('schema',schema,JsonEditor.toJSON(schema))
      }}/> */}
   
    <ProTable
    params={{projectId}}
      headerTitle={
        <div>
            <Button
            onClick={()=>{
             nav(`/dynamicApi/create`)
            }}
            icon={<PlusOutlined/>}>新建</Button>
        </div>
      }
      columns={[
        {
          dataIndex: "name",
          title: "名称",
        },
        {
          dataIndex: "path",
          title: "路径",
        },
        {
          dataIndex: "method",
          title: "方法",
        },
        {
          dataIndex: "type",
          title: "类型",
        },
        {
          title: "操作",
          render(dom, entity, index, action, schema) {
            return (
              // <SaveApi payload={entity}>
                <Button  onClick={()=>nav(`/dynamicApi/create?id=${entity.id}`)} type="link">编辑</Button>
              // </SaveApi>
            );
          },
        },
      ]}
      request={queryDynamicApi}
    />
   
</div>
  );
};
export default App;
